<template>
    <div>
        <img src="../png/1.png" style="width: 100vw;height: 100vh;position: absolute;top: 0;left: 0;z-index: 0;" alt="">
        <div style="z-index: 1;position: relative;">
            <!-- <h1 style="text-align: center;margin-top: 100px;font-size: 50px;color: rgb(41, 105, 178);z-index: 1;">扶农助农平台
            </h1> -->
            <div id="login_box" style="z-index: 1;margin-top: 12%;">
                <h2 id="login">登录</h2>
                <div id="input_box">
                    <input class="i" v-model="username" type="text" placeholder="请输入用户名">
                </div>
                <div class="input_box">
                    <input class="i" v-model="password" type="password" placeholder="请输入密码">
                </div>
                <button class="b" @click="login">登录</button>
                <button class="b" @click="toZhuce" style="margin-top: 15px;">去注册</button>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import '../style/chushihua.css'
import '../style/public.css'
import '../style/denglu.css'
export default {
    data() {
        return {
            username: '',
            password: ''
        }
    },
    mounted() {

    },
    methods: {
        toZhuce() {
            this.$router.push("/register")
        },
        login() {
            axios.get("http://localhost/user2").then((res) => {
                // console.log(res.data);
                for (let i = 0; i < res.data.length; i++) {
                    if (this.username == res.data[i].username && this.password == res.data[i].password) {
                        this.$message({
                            message: '登陆成功!',
                            type: 'success'
                        });
                        localStorage.setItem('username', res.data[i].nick)
                        this.$router.push("/index")
                        return
                    }
                }
                this.$message({
                    message: '账号或密码错误',
                    type: 'warning'
                });
                this.username = ''
                this.password = ''
            })
        }
    }
}
</script>

<style scoped>
#login_box {
    width: 25%;
    height: 350px;
    background-color: #00000090;
    margin: auto;
    margin-top: 5%;
    text-align: center;
    border-radius: 10px;
    padding: 50px 50px;
}

#login {
    color: #ffffff90;
    margin-top: 5%;
}

#input-box {
    margin-top: 5%;
}

span {
    color: #fff;
}

.i {
    border: 0;
    width: 90%;
    font-size: 15px;
    color: #fff;
    background: transparent;
    border-bottom: 2px solid #fff;
    padding: 5px 10px;
    outline: none;
    margin-top: 10px;
}

.i::placeholder {
    color: #fff;
}

.b {
    margin-top: 50px;
    width: 60%;
    height: 30px;
    border-radius: 10px;
    border: 0;
    color: #fff;
    text-align: center;
    line-height: 30px;
    font-size: 15px;
    background-image: linear-gradient(to right, #30cfd0, #330867);
}

#sign_up {
    margin-top: 45%;
    margin-left: 60%;
}

.a {
    color: #b94648;
}
</style>